<template>
	<view class="evaluate">
		<view style="background-color: #fff;padding:20rpx;">
			<view style="background: #F4F4F4;border-radius: 16rpx;position: relative;padding:16rpx;">
				<view class="flex" style="line-height:80rpx;">
					<image style="width: 80rpx;height: 80rpx;border-radius:50%;" :src="detail.icon"></image>
					<view style="font-size: 30rpx;font-weight: bold;margin:0 36rpx 0 16rpx;">{{detail.name}}</view>
					<view style="font-size: 26rpx;">累计完工 <text style="color: #1176EF;">{{detail.okorder}}单</text> </view>
				</view>
				<image style="width:98rpx;height:44rpx;position: absolute;top:30rpx;right:-8rpx;z-index: 8;"
					src="/static/image/01_fs.png"></image>
				<view style="width:98rpx;height:44rpx;position: absolute;top:30rpx;right:-8rpx;text-align: center;line-height: 44rpx;font-size: 20rpx;color: #FFFFFF;z-index: 9;">{{detail.allpoints}}分</view>
			</view>
		</view>
		<view style="padding:24rpx 20rpx;">
			<view style="font-weight: bold;color: #000000;">师傅评价</view>
			<view style="background: #FFFFFF;border-radius: 12rpx;padding:24rpx 20rpx 0;margin:16rpx 0 30rpx;">
				<view class="flex" style="line-height: 34rpx;padding-bottom:24rpx;">
					<view style="font-size: 24rpx;color: #202020;margin-right:52rpx;">服务质量</view>
					<uni-rate :size="18" active-color="#FF9934" v-model="fuwu" value="5" />
				</view>
				<view class="flex" style="line-height: 34rpx;padding-bottom:24rpx;">
					<view style="font-size: 24rpx;color: #202020;margin-right:52rpx;">上门速度</view>
					<uni-rate :size="18" active-color="#FF9934" v-model="shudu" value="5" />
				</view>
				<view class="flex" style="line-height: 34rpx;padding-bottom:24rpx;">
					<view style="font-size: 24rpx;color: #202020;margin-right:52rpx;">服务态度</view>
					<uni-rate :size="18" active-color="#FF9934" v-model="taidu" value="5" />
				</view>
				<view class="flex" style="line-height: 34rpx;padding-bottom:24rpx;">
					<view style="font-size: 24rpx;color: #202020;margin-right:52rpx;">服务时间</view>
					<uni-rate :size="18" active-color="#FF9934" v-model="time" value="5" />
				</view>
			</view>
			<view style="font-weight: bold;color: #000000;">评价内容</view>
			<view style="background: #FFFFFF;border-radius: 12rpx;padding:20rpx;">
				<textarea v-model="content" style="width:638rpx;height:144rpx;background: #F3F3F3;border-radius: 12rpx;font-size:24rpx;padding:16rpx;" placeholder="请输入内容"></textarea>
				<view class="flex" style="margin-top:20rpx;flex-wrap: wrap;">
					<view v-for="(items,indexs) in images" :key="indexs"
						style="width:164rpx;height:164rpx;margin-right:20rpx;position: relative;">
						<image style="width:164rpx;height:164rpx;" :src="items"></image>
						<image @click="delectxx(index,indexs)"
							style="width:32rpx;height:32rpx;position: absolute;top:-12rpx;right:-12rpx;"
							src="/static/image/03_4dfbd.png"></image>
					</view>

					<image v-if="images.length<3" @click="upImages(index)" style="width:164rpx;height:164rpx;"
						src="/static/image/02_10df.png"></image>
				</view>
			</view>
			<view class="buttons" @click="pingjia">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				images:[],
				userid:"",
				orderId:"",
				fuwu: 5,
				shudu: 5,
				taidu:5,
				time:5,
				content: '',
				detail:{},
				pinglun:true,
				type:1
			};
		},
		onLoad(option) {
			this.orderId = option.id
			this.userid = option.userid
			this.type = option.type
			this.$httpapi('fujindetail', 'POST',{userid:option.userid}).then(res => {
				this.detail = res.data
			})
		},
		methods:{
			delectxx(index){
				this.images.splice(index,1)
			},
			upImages(index) {
				var that = this
				uni.chooseImage({
					count: 3 - that.images.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							that.$upShop('upload', res.tempFilePaths[i]).then(rex => {
								let arr = JSON.parse(rex.data)
								that.images.push(arr.fileName)
							})
						}
					}
				})
			},
			pingjia(){
				var that = this
				if(!this.pinglun){
					return
				}
				this.pinglun = false
				var allpoints = 0
				if(this.fuwu==1){
					allpoints = allpoints-1
				}else if(this.fuwu==2){
					allpoints = allpoints-0.5
				}else if(this.fuwu==3){
				}else if(this.fuwu==4){
					allpoints = allpoints+0.5
				}else if(this.fuwu==5){
					allpoints = allpoints+1
				}
				if(this.shudu==1){
					allpoints = allpoints-1
				}else if(this.shudu==2){
					allpoints = allpoints-0.5
				}else if(this.shudu==3){
				}else if(this.shudu==4){
					allpoints = allpoints+0.5
				}else if(this.shudu==5){
					allpoints = allpoints+1
				}
				if(this.taidu==1){
					allpoints = allpoints-1
				}else if(this.taidu==2){
					allpoints = allpoints-0.5
				}else if(this.taidu==3){
				}else if(this.taidu==4){
					allpoints = allpoints+0.5
				}else if(this.taidu==5){
					allpoints = allpoints+1
				}
				if(this.time==1){
					allpoints = allpoints-1
				}else if(this.time==2){
					allpoints = allpoints-0.5
				}else if(this.time==3){
				}else if(this.time==4){
					allpoints = allpoints+0.5
				}else if(this.time==5){
					allpoints = allpoints+1
				}
				this.$httpapi('pingjia', 'POST', {
					userid: this.userid,
					orderId:this.orderId,
					fuwu:this.fuwu,
					shudu:this.shudu,
					taidu:this.taidu,
					time:this.time,
					content:this.content,
					img:this.images.toString(),
					allpoints:allpoints
				}).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 1500,
						icon:'none'
					});
					if(res.code==200){
            that.$utils.saveSyncTime()
            that.pinglun = true
						setTimeout(()=>{
							uni.navigateBack(that.type)
						}, 1500)
					}else{
						this.pinglun = true
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F6FA;
	}

	.evaluate {
		.buttons{
			margin:160rpx auto 0;
			text-align: center;
			width: 710rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #2089FF 0%, #11ACEF 100%);
			border-radius: 44rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 88rpx;
		}
	}
</style>
